﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="CharacterCreation.aspx.vb" Inherits="LokWebGame.CharacterCreation" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" oncontextmenu="return false;">
<head runat="server">
    <title>LOK - Character Creation</title>
    <link href="Styles/CharacterCreation.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="Scripts/Game/CharacterCreation.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            CharacterCreation.Start();

        }
    </script>
</head>

<body style="margin: 0px auto; background-color:gray;">
    <form id="form1" runat="server">
        <div id="divCharacterCreationCanvas">
            <canvas id="CharacterCreationCanvas" width="640" height="480" style="margin: 0px auto;"></canvas>

            <div id="divCharName">
                <input id="CharName" type="text" placeholder="Character Name Here" style="border:none;" autofocus="autofocus" />
            </div>
            <div id="divGender">
                <img id="btnMale" src="Images/Buttons/maleBtnDown.png" onmousedown="SetGender('m');"  style="margin-right:10px;" />
                <img id="btnFemale" src="Images/Buttons/femaleBtnUp.png" onclick="SetGender('f');"/>
            </div>
            <div id="divClassImage">
                <img id="imgClass" src="Images/crits/alive/113.bmp" style="margin-right:10px;" />
            </div>
            <div id="divClassName">
                <input id="ClassName" type="text" value="Fighter" readonly="readonly" style="border:none;" onfocus="this.blur();" />
            </div>
            <div id="divPoints">
                <input id="Points" type="text" value="13" readonly="readonly" style="border:none;" onfocus="this.blur();" />
            </div>
            <div id="divRace">
                <input id="Race" type="text" value="Barbarian" readonly="readonly" style="border:none;" onfocus="this.blur();" />
            </div>
            <div id="divStrength">
                <input id="Strength" type="text" value="14" readonly="readonly" style="border:none;" onfocus="this.blur();" />
                <div style="position:absolute; margin-left:30px; margin-top:-32px;">
                    <img id="StrengthU" src="Images/Buttons/UpU.png" onclick="SetStat('S','U');" style="margin-bottom:1px;"/>
                    <img id="StrengthD" src="Images/Buttons/DownU.png" onclick="SetStat('S','D');" style="margin-top:2px;"/>
                </div>
            </div>
            <div id="divDexterity">
                <input id="Dexterity" type="text" value="14" readonly="readonly" style="border:none;" onfocus="this.blur();" />
                <div style="position:absolute; margin-left:30px; margin-top:-28px;">
                    <img id="DexterityU" src="Images/Buttons/UpU.png" onclick="SetStat('D','U');" style="margin-bottom:1px;"/>
                    <img id="DexterityD" src="Images/Buttons/DownU.png" onclick="SetStat('D','D');" style="margin-top:2px;"/>
                </div>
            </div>
            <div id="divIntelligence">
                <input id="Intelligence" type="text" value="12" readonly="readonly" style="border:none;" onfocus="this.blur();" />
                <div style="position:absolute; margin-left:30px; margin-top:-24px;">
                    <img id="IntelligenceU" src="Images/Buttons/UpU.png" onclick="SetStat('I','U');" style="margin-bottom:1px;"/>
                    <img id="IntelligenceD" src="Images/Buttons/DownU.png" onclick="SetStat('I','D');" style="margin-top:2px;"/>
                </div>
            </div>
            <div id="divWisdom">
                <input id="Wisdom" type="text" value="12" readonly="readonly" style="border:none;" onfocus="this.blur();" />
            </div>
            <div id="divWillPower">
                <input id="WillPower" type="text" value="10" readonly="readonly" style="border:none;" onfocus="this.blur();" />
            </div>
            <div id="divConstitution">
                <input id="Constitution" type="text" value="14" readonly="readonly" style="border:none;" onfocus="this.blur();" />
            </div>
            <div id="divAcceptCancel">
                <img id="imgAccept" onclick="CreateCharacter()" src="Images/Buttons/acceptButtonUp.png" style="margin-right:100px;" onmousedown="$('#imgAccept').attr('src', 'Images/Buttons/acceptButtonDown.png');" />
                <img id="imgCancel" onclick="CancelCharacterCreation()" src="Images/Buttons/cancelButtonUp.png" onmousedown="$('#imgCancel').attr('src', 'Images/Buttons/cancelButtonDown.png');" />
            </div>
        </div>
    </form>
</body>
</html>
